import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Developer/Quick Start" />

## Install

Fluent UI should be installed as a `dependency` of your app.

```sh
yarn add @fluentui/react-components
```

## Setup

Fluent UI components are styled using CSS in JS. This technique requires a style renderer which inserts CSS into DOM when needed. React context is used to provide the style renderer.

Place a `<FluentProvider />` at the root of your app and pass theme as a prop.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';

import App from './App';

ReactDOM.render(
  <FluentProvider theme={teamsLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);
```

## Usage

That's it. You can now use Fluent UI components in your app.

```jsx
import React from 'react';
import { Button } from '@fluentui/react-components';

export default () => <Button appearance="primary">Get started</Button>;
```

### Strict mode

Strict mode is currently not supported. Plese remove any `React.StrictMode` wrappers from your app.

#### SSR with Next.js

To avoid hydration issues, disable strict mode in your app by adding the following configuration to your `next.config.js` file:

```js
module.exports = {
  reactStrictMode: false,
};
```
